import React, {Component} from 'react'
import {Menu, Icon} from 'antd';
import {connect} from 'react-redux'
import {
    NavLeftWrapper,
    Logo
} from './styled'

const {SubMenu} = Menu;

class NavLeft extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {menuList} = this.props
        return (
            <NavLeftWrapper>
                <Logo>
                    <img src="/assets/logo-ant.svg" alt="" />
                    <span> imooc </span>
                </Logo>
                {this.renderNav(menuList)}
            </NavLeftWrapper>
        )
    }
    renderNav (menuList) {
        return (
            <Menu theme="dark">
                {menuList.map((item, key) => {
                    if (item.get('children')) {
                        return (<SubMenu key={item.get('title')}
                                         title={
                                             <span>
                                                <Icon type="appstore"/>
                                                <span>{item.get('title')}</span>
                                            </span>
                                         }
                                >
                                {this.renderNav(item.get('children'))}
                            </SubMenu>
                        )
                    }
                    return (
                        <Menu.Item key={key}>
                            <Icon type="mail"/>
                            {item.get('title')}
                        </Menu.Item>
                    )
                })
                }
            </Menu>
        )

    }
}

const mapState = (state) => ({
    menuList: state.getIn(['navLeft', 'menuList'])
})

const mapDispatch = () => ({})


export default connect(mapState, mapDispatch)(NavLeft)
